<template>
  <div class="User">
    <shop-header>主页</shop-header>
    <div class="userinfotmation">
      <div class="left">
        <img :src="this.$axios.defaults.baseURL + info.head_img" alt="" />
      </div>
      <div class="center">
        <div class="top">
          <i class="iconfont iconxingbienv" v-if="info.gender == 0"></i>
          <i class="iconfont iconxingbienan" v-else></i>
          <span>{{ info.nickname }}</span>
        </div>
        <div class="bottom">{{ info.create_date | date }}</div>
      </div>
      <div class="right">
        <i class="iconfont iconjiantou1"></i>
      </div>
    </div>
    <van-cell-group>
      <van-cell
        title="我的关注"
        is-link
        value="关注的用户"
        @click="$router.push('/follow')"
      />
      <van-cell
        title="我的跟帖"
        is-link
        value="跟帖/回复"
        @click="$router.push('/usercomments')"
      />
      <van-cell
        title="我的收藏"
        is-link
        value="文档/视频"
        @click="$router.push('/mystar')"
      />
      <van-cell title="设置" is-link @click="edit" />
      <van-cell title="退出" is-link @click="exit" />
    </van-cell-group>
  </div>
</template>

<script>
export default {
  data() {
    return {
      info: {},
    };
  },
  methods: {
    exit() {
      this.$dialog
        .confirm({
          title: "温馨提示",
          message: "您确定要退出吗？",
        })
        .then(() => {
          localStorage.removeItem("token");
          localStorage.removeItem("id");
          this.$toast.success("退出成功");
          this.$router.push("/login");
        })
        .catch(() => {
          // on cancel
        });
    },
    edit() {
      this.$router.push("/edit");
    },
  },
  async created() {
    const token = localStorage.getItem("token");
    const id = localStorage.getItem("id");
    const res = await this.$axios.get(`/user/${id}`);
    console.log(res);
    this.info = res.data.data;
  },
};
</script>

<style scoped lang="less">
.User {
  .userinfotmation {
    height: 60px;
    background-color: #f4f4f4;
    border-bottom: 3px solid grey;
    display: flex;
    align-items: center;
    padding: 0 20px;
    .left {
      height: 50px;
      img {
        height: 50px;
        object-fit: contain;
      }
    }
    .center {
      flex: 1;
      height: 50px;
      margin: 0 20px;
      .top {
        margin-bottom: 10px;
      }
    }
  }
}
</style>
